﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dong_jia_bank</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
	<link rel="stylesheet" href="#(ctx_path)/lib/bootstrap/css/bootstrap.css">
	<title>Flash预览</title>
</head>
<body>
<div class="container">
	<div class="row" id="flash">
		<div id="myCarousel" class="carousel slide">
			<!-- 轮播（Carousel）指标 -->
			<ol class="carousel-indicators">

			</ol>
			<!-- 轮播（Carousel）项目 -->
			<div class="carousel-inner">
			</div>
			<!-- 轮播（Carousel）导航 -->
			<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
	</div>
</div>
<!--_footer 作为公共模版分离出去-->
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript" src="#(ctx_path)/lib/bootstrap/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="#(ctx_path)/lib/JSUtils/Tools.js"></script>
<script type="text/javascript" src="#(ctx_path)/lib/bootstrap/js/bootstrap.js"></script>

<script type="text/javascript">
    $(function(){
        initData();
        touchslide();
    });
    function touchslide(){
        var startX,endX;//声明触摸的两个变量
        var offset = 30;//声明触摸距离的变量
        $('.carousel-inner').on('touchstart',function (e) {
            startX= e.originalEvent.touches[0].clientX;//当触摸开始时的x坐标；
        });
        $('.carousel-inner').on('touchmove',function (e) {
            endX = e.originalEvent.touches[0].clientX;//当触摸离开时的x坐标；
        });
        $('.carousel-inner').on('touchend',function (e) {
            //当触摸完成时进行的事件；
            var distance = Math.abs(startX - endX);//不论正负，取值为正值；
            if (distance > offset){
                if(startX > endX){
                    $('#myCarousel').carousel('next');//当开始的坐标大于结束的坐标时，滑动到下一附图
                }else{
                    $('#myCarousel').carousel('prev');//当开始的坐标小于结束的坐标时，滑动到上一附图

                }

            }
        });
    }
    function initData(){
        //初始化第一页数据
        $.ajax({
            type: 'POST',
            url: '#(ctx_path)/popluarize/cuflashList/loadCuFlash.html',
            data: null,
            dataType: 'json',
			async:false,
            success: function (data) {
                if(data.length != 0){
                    var pagehtml = "";
                    var html = "";
                    for (var i = 0; i < data.length; i++) {
                        if(i == 0){
                            pagehtml += "<li data-target=\"#myCarousel\" data-slide-to=\""+i+"\" class=\"active\" ></li>";
                            html += "<div class=\"item active\">";
                        }else{
                            pagehtml += "<li data-target=\"#myCarousel\" data-slide-to=\""+i+"\"></li>";
                            html += "<div class=\"item\">";
                        }
                        html += "<a  target='_blank' href='" + data[i].url + "'>";
                        html += "   <img src='#(ctx_path)/upload/"+data[i].photo+"' style='height: 170px;width: 100%;' >";
                        html += "</a>";
                        html += "</div>";
                    }
                    $(".carousel-indicators").html(pagehtml);
                    $(".carousel-inner").html(html);
                }
            },
            error:function(data) {
                layer.msg('系统错误，请联系管理员！', {icon: 5,time:1500});
                console.log(data.msg);
            }
        });

    }

    

</script>
</body>
</html>